<template>
    <div class="table-wrapper">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column 
          v-for="column in columns" 
          :key="column.prop"
          v-bind="column"
        />
        <el-table-column v-if="showOperation" label="操作" :width="operationWidth">
          <template #default="scope">
            <el-button 
              v-if="operations.includes('edit')"
              size="small" 
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button 
              v-if="operations.includes('delete')"
              size="small" 
              type="danger" 
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
    defineOptions({
        name:'TableData'
    })

  defineProps({
    // 表格数据
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    // 列配置
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    // 是否显示操作列
    showOperation: {
      type: Boolean,
      default: true
    },
    // 操作列宽度
    operationWidth: {
      type: [String, Number],
      default: '180'
    },
    // 显示哪些操作按钮
    operations: {
      type: Array,
      default: () => ['edit', 'delete']
    }
  })
  
  const emit = defineEmits(['edit', 'delete'])
  
  const handleEdit = (row) => {
    emit('edit', row)
  }
  
  const handleDelete = (row) => {
    emit('delete', row)
  }
  </script>